<template>
  <view>
    <view class="d-flex d-flex-between px-2 d-flex-middle pt-3">
      <view class="bg-fff rounded20 d-flex d-flex-middle overflow box">
        <view class="searchBox px-2  d-flex-item d-flex d-flex-middle">
          <text class="iconfont icon-icon_sousuo main-color font40  text"></text>
          <input v-model="formData.name" class="pl-1 rounded10 font30 d-flex-item" placeholder="搜索资料包"
                 placeholder-class="colorhold"/>
          <text v-if="formData.name" class="text-right iconfont icon-jiufuqianbaoicon08 main-color ml-1"
                @click="dataCancel"></text>
        </view>
        <view class="subject-section d-flex d-flex-middle" @click="toggleSubjectDropdown">
          <view class="subject-selector d-flex d-flex-between d-flex-middle">
            <text class="font30 color333">{{ selectedSubject.name || '全部科目' }}</text>
            <text class="iconfont icon-icon_triangle_  ml-1 main-color"
                  :class="{'rotate-180': showSubjectDropdown}"></text>
          </view>

        </view>
        <!-- 下拉选项列表 -->
        <view v-if="showSubjectDropdown" class="dropdown-triangle"></view>
        <view v-if="showSubjectDropdown" class="subject-dropdown bg-white rounded10 mt-1">
          <view
              v-for="(subject, index) in subjectList"
              :key="index"
              class="subject-item py-2 px-3 font28 color666"
              :class="{'selected': selectedSubject.id === subject.id}"
              @click="selectSubject(subject)"
          >
            {{ subject.name }}
          </view>
        </view>
      </view>
    </view>

    <view class="column-model bg-white px-2 py-2 pt-4">
      <view class="column-box d-flex d-flex-between d-flex-middle pb-2">
        <text class="font30 main-color font-bold">今日推荐</text>
      </view>
      <view class="d-flex recommend-grid1">
        <view
            v-for="(item, index) in recommendList.slice(0,3)"
            :key="index"
            class="recommend-data-box d-flex d-flex-column bg-fff rounded10"
            @click="goUrl(`/subPages/resourcePack/resourcePack?id=${item.id}` )"
        >
          <image
              :src="item.document_cover"
              class="recommend-picture2"
              mode="aspectFill"
          ></image>
          <view class="px-1 pt-1 pb-2">
<!--            <view class="colorf00">￥1234</view>-->
            <view class="text-clamp-two font26 color-5C5C5CFF mt-1">
<!--              <text class="price-tag mr-1 font24">701.58K</text>-->
              <text>{{ item.category_name }}</text>
            </view>
            <!--            <view class="d-flex d-flex-between d-flex-middle mt-1">-->
            <!--              <text class="font20 color-5C5C5CCC">-->
            <!--                <text>891</text>-->
            <!--                位同学正在学习-->
            <!--              </text>-->
            <!--            </view>-->
            <view class="receive-btn mt-2 mx-5">
              领取资料
            </view>
          </view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
import {fileApi} from "@/http/fileApi";
import {mapState} from "vuex"

export default {
  data() {
    return {
      formData: {
        name: ''
      },
      showSubjectDropdown: false,
      selectedSubject: {}, // 当前选中的科目
      subjectList: [ // 科目列表数据
        {id: 0, name: '全部科目'},
        {id: 1, name: '数学'},
        {id: 2, name: '英语'},
        {id: 3, name: '物理'},
        {id: 4, name: '化学'},
        {id: 5, name: '生物'},
        {id: 6, name: '历史'},
        {id: 7, name: '地理'},
        {id: 8, name: '政治'}
      ],
      recommendList: [],
      form: {
        keyword: '',
        category_id: ''
      }
    }
  },
  onLoad() {
    this.goCategoryId()
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
    }),
  },
  methods: {
    async goCategoryId() {
      let res = await fileApi.getCategoryId(this.form)
      this.recommendList = res.list
    },
    toggleSubjectDropdown() {
      this.showSubjectDropdown = !this.showSubjectDropdown;
    },

    selectSubject(subject) {
      this.selectedSubject = subject;
      this.showSubjectDropdown = false;
    },
    // 点击页面其他区域关闭下拉框
    hideDropdownOnClickOutside(e) {
      if (this.showSubjectDropdown) {
        this.showSubjectDropdown = false;
      }
    },
    goUrl(urlPages, data) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {
        uni.navigateTo({
          url: urlPages
        })
      }
    },
  }
}
</script>

<style scoped>
.box {
  width: 100%;
}

.searchBox {
  height: 80rpx;
  line-height: 80rpx;
  border-right: 4rpx solid rgba(92, 92, 92, 0.3);
}

.dropdown-triangle {
  position: absolute;
  top: 98rpx;
  right: 40rpx;
  width: 0;
  height: 0;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-bottom: 10rpx solid #fff;
  z-index: 1000;
}


.subject-dropdown {
  position: absolute;
  z-index: 999;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  max-height: 400rpx;
  overflow-y: auto;
  right: 20rpx;
  top: 98rpx;
  background: #fff;
}

.subject-item {
  border-bottom: 1rpx solid #f0f0f0;
}

.subject-item:last-child {
  border-bottom: none;
}

.subject-item.selected {
  color: #007AFF;
  font-weight: bold;
}

.rotate-180 {
  transform: rotate(180deg);
}

.subject-section {
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  position: relative;
}

.icon-icon_triangle_ {
  font-size: 12rpx;
}

.recommend-grid1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.recommend-picture2 {
  width: 100%;
  height: 348rpx;
  border-radius: 10rpx;
}

.price-tag {
  color: rgba(242, 168, 94, 1);
  border: 1rpx solid rgba(242, 168, 94, 1);
  border-radius: 6rpx;
  padding: 4rpx 8rpx;
  display: inline-block;
}

/* 添加领取按钮样式 */
.receive-btn {
  background: linear-gradient(90deg, #007AFF, #218bfd);
  color: white;
  text-align: center;
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  margin-top: 10rpx;
  align-self: flex-start;
}

.receive-btn:hover {
  opacity: 0.9;
}

.text-clamp-two {
  line-height: 1.6; /* 调整行高使2行高度固定 */
  height: calc(1.6em * 2); /* 固定2行高度 */
}
</style>
